<template>
    <div class="map-wrap">
        <div id="map" class="map"></div>
        <div class="map-button">
            <button @click="playback.play()">开始</button>
            <button @click="playback.pause()">暂停</button>
            <button @click="playback.stop()">结束</button>
        </div>
    </div>
</template>

<script>
    import {mapReady} from '@/utils/index.js'
    import {Playback} from '@/utils/playback.js'
    export default {
        name: "initMap",
        props: {
            URL: `http://api.map.baidu.com/api?v=3.0&callback=bmapCallback&ak=`,
            ak: 'pPurcozpqQVKnZg8NTG2peBYbxVZj5rx',
            // 速度
            speed: {
                type: [Number, String],
                default() {
                    return 500
                }
            },
            // 进度
            process: {
                type: [Number, String],
                default() {
                    return 0
                }
            },
            // 是否区分速度颜色
            speedColorFlag:{
                type: Boolean,
                default() {
                    return true
                }
            },
        },
        data() {
            return {
                MAP_URL: `http://api.map.baidu.com/api?v=3.0&callback=bmapCallback&ak=pPurcozpqQVKnZg8NTG2peBYbxVZj5rx`,
                map: null,
                center: {lng:116.404, lat:39.915},
                playback: null,
                points: [
                    {lng: 116.40374847445713, lat: 39.923356024137384, speed: 10},
                    {lng: 116.39756813254849, lat: 39.92346669203684, speed: 20},
                    {lng: 116.39778372587088, lat: 39.91422530140359, speed: 80},
                    {lng: 116.41115051185935, lat: 39.91433598417785, speed: 120},
                    {lng: 116.40949762972099, lat: 39.92374336099664, speed: 160}
                    // {lng: 116.40353288113474, lat: 39.92407536226086, speed: 5}
                ],
                markerIcon: {
                    url: 'http://lbs.baidu.com/jsdemo/img/car.png',
                    size: {width: 52, height: 26}
                }
            }
        },
        mounted() {
            mapReady(this.MAP_URL, ()=>{
                console.log('js loaded!',BMap)
                this.initMap()
            })
        },
        beforeDestroy() {
            this.playback.dispose();
        },
        watch: {
            speed(val, oldval) {
                const { setSpeed } = this
                if(val != oldval) {
                    setSpeed(val)
                }
            },
            speedColorFlag(val, oldval) {
                const { playback } = this
                if(playback) {
                    playback.stop()
                    playback.speedColorFlag = val
                    playback.play()
                }
            }
        },
        methods: {
            initMap() {
                if(!BMap) {
                    alert('暂无BMap')
                    return
                }
                this.map = new BMap.Map('map');
                this.map.centerAndZoom(new BMap.Point(this.center.lng, this.center.lat),15)
                this.playback = new Playback(BMap, this.map);
                this.playback.setWheelZoom()
                // this.map.enableScrollWheelZoom()
                this.playback.setPoints(this.points)
                this.playback.setBMapPoints(this.points)
                // this.playback.addMark(this.playback.getBMapPoint(this.center), {
                //     icon: new BMap.Icon(
                //         this.markerIcon.url,
                //         this.markerIcon.size
                //     )
                // })
                this.playback.speedColorFlag = this.speedColorFlag
                this.playback.initLushu({
                    speed: this.speed,
                    onMoveNext: (res) => {
                        const {cur} = res
                        // 运动时进度改变，通知父级
                        let processData = this.playback.getProcess(cur);
                        this.$emit('autoSetProcess', processData)
                        // this.process = this.playback.getProcess(cur);
                    }
                });

                this.playback.play();
            },
            // 手动设置进度
            manualSetProcess(val) {
                this.playback.manualSetProcess(val);
            },
            // 转化获取进度 占比=》数值
            getProcess(cur) {
                this.playback.getProcess(cur);
            },
            // 设置速度
            setSpeed(val) {
                this.playback.track._setOptions({
                    speed: val
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .map{
        width: 100%;
        height: 400px;
    }
    .form-wrap{
        width: 300px;
        margin: 20px auto;
    }
</style>